<template>
    <div>
        <ul v-for="(item,index) in goods" :key="item.name" >
            <li>

                <div class="title" :id="index">{{ item.name }}</div>
                <div v-for="item in foods" :key="item.name" class="con">
                    <img :src="item.image" alt="">
                    <div>
                        <p>{{ item.name }}</p>
                        <p>{{item.description}}</p>
                        <p>月售{{item.sellCount}}份 &emsp;好评率%{{item.rating}}</p>
                        <p>￥{{item.price}} </p>
                    </div>
                    <img src="../img/—++.png" alt="" style="width:4vw;height:4vw;margin-top: 20px;margin-left: 15px;" @click="gougoods()">

                </div>
            </li>
        </ul>


        <button @click="get()">点击</button>

    </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
    methods: {
        ...mapActions(["getData"]),
        get() {
            console.log(this.goods);
            console.log(this.foods);
        },
        gougoods(){

        }

    },
    mounted() {


        this.getData();

    },
    computed: {
        ...mapState(["foods", "goods", "name"])
    }
}
</script>

<style  scoped>
.title {
    background-color: #f3f5f7;
    font-size: 3.2vw;
    color: gray;
    line-height: 6.933vw;
    border-left: 3px solid gray;
}
.con{
    display: flex;
    /* border: 1px solid gray; */
    padding: 4.8vw 0 4.8vw 4.8vw;
    
}
li{
    width: 100%;
}
.con img{
    width: 15vw;
    height: 15vw;
}
.con>div>p:nth-child(1){
    font-size: 3.733vw;
    
}
.con>div>p:nth-child(4){
    font-size: 3.733vw;
    color: red;
   
}
.con>div>p:nth-child(2),.con>div>p:nth-child(3){
    font-size: 2.667vw;
    color: gray;
  
}
.con>div{
    margin-left: 2.667vw;
}

</style>